<template>
  <div class="header">
    <!-- 折叠按钮 -->
    <div
      class="collapse-btn"
      @click="collapseChage"
    >
      <i
        v-if="!collapse"
        class="el-icon-s-fold"
      ></i>
      <i
        v-else
        class="el-icon-s-unfold"
      ></i>
    </div>
    <div class="logo">
      <span>甘美医院药物试验平台</span>
      <el-divider direction="vertical"></el-divider>
      <router-link
        to="/frontDesk"
        class='goto'
        @click.native="goToHome"
      >前往首页→</router-link>
    </div>
    <div class="header-right">
      <div class="header-user-con">
        <el-dropdown
          class="user-name"
          trigger="click"
          @command="handleCommand"
        >
          <span class="el-dropdown-link">
            操作
            <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              divided
              command="logout"
              @click='logout'
            >退出登录</el-dropdown-item>
            <el-dropdown-item
              divided
              command="changePWD"
              @click.native='changePWD'
            >更改密码</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 更改密码弹层 -->
    <el-dialog
      title="修改密码"
      :visible.sync="showDialog"
      width="37%"
      center
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      @close='closeFn'
    >
      <el-form
        ref='changePWDForm'
        :model="changePWDForm"
        label-width="80px"
        label-position="right"
      >
        <el-form-item
          label="密码"
          prop="Pwd"
        >
          <el-input
            v-model='changePWDForm.Pwd'
            type="password"
            placeholder='密码'
            style='width: 87%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label="重复密码"
          prop='NewPwd'
        >
          <el-input
            v-model='changePWDForm.NewPwd'
            type="password"
            placeholder="重复密码"
            style='width: 87%'
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="changeSubmit"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bus from '../common/bus';
import { getChangePasswordAPI } from '@/api/user';
export default {
    data() {
        return {
            collapse: false,
            showDialog: false,
            name: '',
            changePWDForm: {
                Pwd: '',
                NewPwd: ''
            }
        };
    },
    computed: {
        username() {
            let username = localStorage.getItem('ms_username');
            return username ? username : this.name;
        }
    },
    methods: {
        goToHome() {
            localStorage.removeItem('url');
        },
        // 文字退出登录
        logout() {
            this.$confirm('您正在退出登录,是否退出?', '提示', {
                type: 'warning'
            }).then(() => {
                localStorage.removeItem('url');
                localStorage.removeItem('gcp_oprid');
                localStorage.removeItem('gcp_token');
                localStorage.removeItem('xmid');
                localStorage.removeItem('changeXmid');
                localStorage.removeItem('userInfo');
                localStorage.removeItem('aaaxmid');
                localStorage.removeItem('time');
                this.$router.push('/frontDesk');
                this.$store.dispatch('user/logout');
                this.$message({
                    duration: 1500,
                    type: 'success',
                    message: '退出成功!'
                });
            });
        },
        // 更改密码
        changePWD() {
            this.showDialog = true;
        },
        async changeSubmit() {
            let res = await getChangePasswordAPI({
                token: this.$store.state.user.token,
                OprID: this.$store.state.user.oprid,
                Pwd: this.changePWDForm.Pwd,
                NewPwd: this.changePWDForm.NewPwd
            });
            if (res.code == 'succ') {
                this.$message.success('修改成功');
                localStorage.removeItem('gcp_token');
                localStorage.removeItem('url');
                localStorage.removeItem('gcp_oprid');
                localStorage.removeItem('changeXmid');
                localStorage.removeItem('userInfo');
                localStorage.removeItem('aaaxmid');
                localStorage.removeItem('time');
                this.$router.push('/frontDesk');
                this.$store.dispatch('user/logout');
            } else {
                this.$message.error(res.message);
            }
        },
        // 用户名下拉菜单选择事件
        handleCommand(command) {
            if (command == 'logout') {
                this.$confirm('您正在退出登录,是否退出?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('user/logout');
                    this.$router.push('/frontDesk');
                    this.$message({
                        duration: 1500,
                        type: 'success',
                        message: '退出成功!'
                    });
                });
            }
        },
        // 侧边栏折叠
        collapseChage() {
            this.collapse = !this.collapse;
            bus.$emit('collapse', this.collapse);
        },
        // 关闭弹窗的回调
        closeFn() {
            this.changePWDForm = {};
            this.$refs.changePWDForm.resetFields();
        }
    },
    mounted() {
        if (document.body.clientWidth < 1200) {
            this.collapseChage();
        }
    }
};
</script>
<style scoped>
.logout {
    color: #fff;
    font-size: 16px;
    margin-left: 15px;
    cursor: pointer;
}
.logout:hover {
    color: #f10000;
}
.goto {
    color: #fff;
    margin-left: 20px;
}
.goto:hover {
    color: #ff8923;
}
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: #fff;
    background: -webkit-linear-gradient(right, #409eff, #3d6df8);
}
.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
}
.header .logo {
    float: left;
    /*width: 250px;*/
    line-height: 70px;
}
.header-right {
    float: right;
    padding-right: 50px;
}
.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}
.btn-fullscreen {
    transform: rotate(45deg);
    margin-right: 5px;
    font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}
.btn-bell-badge {
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #fff;
}
.btn-bell .el-icon-bell {
    color: #fff;
}
.user-name {
    margin-left: 10px;
}
.user-avator {
    margin-left: 20px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.el-dropdown-link {
    color: #fff;
    cursor: pointer;
}
.el-dropdown-menu__item {
    text-align: center;
}
</style>
